* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  overscroll-behavior: none; /* 防止页面过度滚动 */
}

.bottle-container {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  position: relative;
  transition: background 0.3s;
  overflow: hidden;
}

.bottle-container.blue {
  background: linear-gradient(135deg, #e3f2fd, #f0f8ff);
}

.bottle-container.green {
  background: linear-gradient(135deg, #e8f5e8, #f1f8e9);
}

.bottle-container.purple {
  background: linear-gradient(135deg, #f3e5f5, #fce4ec);
}

.bottle-container.orange {
  background: linear-gradient(135deg, #fff8e1, #fefbf3);
}

.bottle-container.pink {
  background: linear-gradient(135deg, #fff0f5, #fff5f8);
}

.bottle-container.dark {
  background: #181828;
}

.theme-switch {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 200px;
}

.theme-switch button {
  border: none;
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.8;
  transform: scale(0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-switch button.active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.svg-bottle-wrapper {
  position: relative;
  width: 400px; /* 增大奶瓶大小，从原来的320px */
  height: 400px; /* 增大奶瓶大小，从原来的320px */
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 8px 32px #ffb6c133);
  touch-action: manipulation;
  margin-bottom: 50px; /* 添加底部边距，防止数字显示溢出 */
}

.bottle-container.dark .svg-bottle-wrapper {
  filter: drop-shadow(0 8px 32px #0006);
}

.bottle-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.milk-amount {
  display: none;
}

.milk-amount-below {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 20px);
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 25px; /* 增大圆角 */
  padding: 10px 25px; /* 增大内边距 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
  transition: box-shadow 0.2s, background 0.2s;
  z-index: 2;
  backdrop-filter: blur(5px); /* 添加模糊背景效果 */
}

.bottle-container.dark .milk-amount-below {
  background: rgba(40, 40, 40, 0.7);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.milk-amount-main {
  font-size: 56px; /* 增大字体大小，从原来的40px */
  font-weight: bold;
  margin-right: 8px;
  transition: color 0.2s;
}

.bottle-container.pink .milk-amount-main {
  color: #ff69b4;
  text-shadow: 0 2px 8px #fff0f5;
}

.bottle-container.blue .milk-amount-main {
  color: #4285f4;
  text-shadow: 0 2px 8px #e3f2fd;
}

.bottle-container.green .milk-amount-main {
  color: #34a853;
  text-shadow: 0 2px 8px #e8f5e8;
}

.bottle-container.purple .milk-amount-main {
  color: #9c27b0;
  text-shadow: 0 2px 8px #f3e5f5;
}

.bottle-container.orange .milk-amount-main {
  color: #ff9800;
  text-shadow: 0 2px 8px #fff8e1;
}

.bottle-container.dark .milk-amount-main {
  color: #fff;
  text-shadow: 0 2px 8px #000;
}

.milk-amount-unit {
  font-size: 28px; /* 增大字体大小，从原来的20px */
  font-weight: 500;
  transition: color 0.2s;
}

.bottle-container.pink .milk-amount-unit {
  color: #ffb6c1;
}

.bottle-container.blue .milk-amount-unit {
  color: #90caf9;
}

.bottle-container.green .milk-amount-unit {
  color: #81c784;
}

.bottle-container.purple .milk-amount-unit {
  color: #ce93d8;
}

.bottle-container.orange .milk-amount-unit {
  color: #ffcc02;
}

.bottle-container.dark .milk-amount-unit {
  color: #fff;
}

.svg-bottle-wrapper:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

@media (max-width: 600px) {
  .svg-bottle-wrapper {
    width: 90vw;
    height: 90vw;
    max-width: 450px; /* 增大移动端最大宽度 */
    max-height: 450px; /* 增大移动端最大高度 */
  }
  
  .milk-amount-main {
    font-size: 48px; /* 移动端稍微小一点 */
  }
  
  .milk-amount-unit {
    font-size: 24px; /* 移动端稍微小一点 */
  }
  
  .theme-switch {
    top: 10px;
    right: 10px;
  }
} 